<template>
	<z-paging ref="paging" bg-color="#F6F6F6">
		<view class="d-m-t-20 bg d-p-l-30 d-p-r-30">
			<view class="u-border-bottom d-flex d-col-top d-p-t-40 d-p-b-40 d-row-between">
				<view class="d-label d-font-28">
					<text>姓名</text>
					<!-- <text class="d-red">*</text> -->
				</view>
				<view class="">
					<view><input v-model="form.member_name" border="none" placeholder="请输入姓名" class='catname'></input></view>
					<!-- <view class="d-m-t-40">
						<u-radio-group v-model="form.member_sex" size="30rpx" label-size="36rpx">
							<view class="d-m-r-70"><u-radio label="男" name="男"></u-radio></view>
							<view><u-radio label="女" name="女"></u-radio></view>
						</u-radio-group>
					</view> -->
				</view>
				<!-- <view @click="upload"><u-avatar :src="form.member_photo" size="130rpx"></u-avatar></view> -->
			</view>
			<!-- <view class="d-flex d-p-t-30 d-p-b-30 d-row-between u-border-bottom">
				<view class="d-label d-font-28">
					<text>年龄</text>
				</view>
				<view class=""><input v-model="form.member_idCard" placeholder="请输入年龄" border="none" class='catname'></input>
				</view>
			</view> -->
			<view class="d-flex d-p-t-30 d-p-b-30 d-row-between u-border-bottom">
				<view class="d-label d-font-28">
					<text>身份证号</text>
				</view>
				<view class=""><input v-model="form.member_idCard" placeholder="请输入身份证号" border="none" class='catname' type="idcard" maxlength="18"></input>
				</view>
			</view>
			<view class="u-border-bottom d-flex d-p-t-30 d-p-b-30 d-row-between">
				<view class="d-label d-font-28">
					<text>手机号</text>
				</view>
				<view class=""><input type="number" maxlength="11" v-model="form.member_phone" class='catname'
						placeholder="请输入手机号" border="none"></input></view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30 d-row-between u-border-bottom">
				<view class="d-label d-font-28">
					<text>紧急联系人</text>
				</view>
				<view class=""><input v-model="form.emergency_contact_name" placeholder="请输入紧急联系人" border="none" class='catname'></input>
				</view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30 d-row-between u-border-bottom">
				<view class="d-label d-font-28">
					<text>紧急联系人电话</text>
				</view>
				<view class=""><input v-model="form.emergency_contact_phone" placeholder="请输入紧急联系人电话" border="none" class='catname' type="number" maxlength="11"></input>
				</view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30 d-row-between u-border-bottom" @click="custodian_show = true">
				<view class="d-label d-font-28">
					<text>被监护人关系</text>
				</view>
				<view class=""><input v-model="familer_relation_id" placeholder="请选择被监护人关系" border="none" class='catname' disabled></input>
				</view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30  ">
				<view class=" d-font-28">
					<text>体检报告</text><text  v-if="osType == 'iOS'" style="font-size: 28rpx;color: red;">(仅支持相册中选取照片，且大小不超过 5M)</text>
				</view>
			</view>
			<view class="d-flex d-p-b-30 d-row-between u-border-bottom">
				<!-- <view @click="upload">
					<image :src="form.medical_report" mode="" style="width: 100rpx;height: 100rpx;" v-if="form.medical_report"></image>
					<image src="../../static/tupian.png" mode="" style="width: 100rpx;height: 100rpx;" v-else></image>
				</view> -->
				<view class="upload">
					<u-upload :fileList="fileList1" name="1" width="148rpx" height="148rpx" 
						@afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" />
				</view>
			</view>
			<view class="d-flex d-p-t-30 d-p-b-30  ">
				<view class=" d-font-28">
					<text>户口本照片</text><text v-if="osType == 'iOS'" style="font-size: 28rpx;color: red;">(仅支持相册中选取照片，且大小不超过 5M)</text>
				</view>
			</view>
			<view class="d-flex d-p-b-30 d-row-between ">
				<!-- <view @click="hukoumen">
					<image :src="form.familer_cert_url" mode="" style="width: 100rpx;height: 100rpx;" v-if="form.familer_cert_url"></image>
					<image src="../../static/tupian.png" mode="" style="width: 100rpx;height: 100rpx;" v-else></image>
				</view> -->
				<u-upload :fileList="fileList4" @afterRead="afterRead12" @delete="deletePic12" name="4" multiple
					:maxCount="9"></u-upload>
			</view>
			<!-- <view class='ul'>
				<view class='li'>
					<view class="u-cell__title ">头像<text v-if="osType == 'iOS'" style="font-size: 28rpx;color: red;">(仅支持相册中选取照片，且大小不超过 5M)</text></view>
				</view>
			</view>
			<view class='ul'>
				<view class='li'>
					<view @click="imgupload">
						<image v-if="form.member_photo == ''" src="../../static/tupian.png" mode=""
							style="width: 100rpx;height: 100rpx;"></image>
						<image v-else :src="form.member_photo" mode="" style="width: 100rpx;height: 100rpx;">
						</image>
					</view>
				</view>
			</view> -->
			<view class="u-border-bottom d-flex d-p-t-30 d-p-b-30 d-row-between">
				<view class="d-label d-font-28">
					<text>审核状态</text>
				</view>
				<view class=""><input type="number" maxlength="11" v-model="form.member_status_desc" class='catname' border="none" disabled></input></view>
			</view>
		</view>
		
		<u-picker :show="custodian_show" :columns="col_list" keyName="label" @confirm="custodian_list"
			@cancel="custodian_show = false">
		</u-picker>
		<!-- <view class="d-m-t-20 bg d-p-l-30 d-p-r-30">
			<view class="d-flex d-p-t-30 d-p-b-30">
				<view class="d-label d-font-28"><text>备注</text></view>
				<view class="d-flex-1"><u-textarea v-model="form.member_memo" confirmType="done"></u-textarea></view>
			</view>
		</view> -->
		<template slot="bottom">
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20">
				<u-button type="primary" shape="circle" :custom-style="{
						height: '80rpx',
						fontSize: '30rpx',
						background: '#59A0FF'
					}" @click="submit">
					保存
				</u-button>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		upSave,
		mInfo,
		upImg,
		familer_cert_url,audit_save,audit_info,bodyCheckImg
	} from '@/common/api';
	export default {
		data() {
			return {
				form: {
					member_id: uni.getStorageSync('member_id'),
					member_name: "",
					member_phone: "",
					member_idCard: "",
					member_photo: "",
					member_password: "",
					member_type: "13",
					emergency_contact_name: "",
					emergency_contact_phone: "",
					medical_report: "",
					familer_relation:'',
					familer_cert_url:'',
					member_status_desc:'',
					op:1
				},
				custodian_show: false,
				col_list: [
					[{
							id: 1,
							label: "夫妻"
						},
						{
							id: 2,
							label: "子女"
						},
						{
							id: 3,
							label: "父母"
						},
						// {
						// 	id: 4,
						// 	label: "其他亲属"
						// }
					]
				],
				familer_relation_id:'',
				osType:'',
				fileList1: [],
				url_list: [],
				fileList12: [],
				url_list12: [],
				fileList4: []
			};
		},
		onLoad(e) {
			// this.osType = getEnv_app();
			// this.osType = 'iOS'
			let that =this
			uni.getSystemInfo({
			    success: function (res) {
			        // res.platform 可能的值有 'android'、'ios'、'devtools' 等
			        // res.appName 可能的值有 '微信小程序'、'H5' 等
			        if (res.platform === 'android') {
			            console.log('在Android浏览器中打开');
			            // 执行Android特定的逻辑
			        } else if (res.platform === 'ios') {
			            console.log('在iOS浏览器中打开');
			            // 执行iOS特定的逻辑
						that.osType = 'iOS'
			        } else {
			            console.log('在其他浏览器中打开');
			            // 执行其他平台的逻辑
			        }
			    }
			});
			    // console.log("当前操作系统类型：", osType);
			// if(this.osType == 'Android'){
			// 	this.anios = false
			// }
			// if(this.osType == 'iOS'){
			// 	this.anios = true
			// }
			if (e?.id) {
				this.form.member_id = e.id;
				uni.setNavigationBarTitle({
					title: '编辑被监护人'
				});
				audit_info({
					id: e.id
				}).then(res => {
					// this.form = res;
					// this.form = res
					this.form.member_name = res.member_name
					this.form.member_phone = res.member_phone
					this.form.member_idCard = res.member_idCard
					this.form.member_password = res.member_password
					this.form.member_type = res.member_type
					this.form.emergency_contact_name = res.emergency_contact_name
					this.form.emergency_contact_phone = res.emergency_contact_phone
					this.form.member_type=  res.member_type_bool
					this.form.medical_report = res.medical_report
					this.form.member_photo = res.member_photo
					this.form.op = 2
					if (res.familer_relation == 1) {
						this.familer_relation_id ='夫妻'
					} else if(res.familer_relation == 2){
						this.familer_relation_id ='子女'
					} else if(res.familer_relation == 3){
						this.familer_relation_id ='父母'
					} else if(res.familer_relation == 4){
						this.familer_relation_id ='其他亲属'
					}
				});
			} else {
				uni.setNavigationBarTitle({
					title: '添加被监护人'
				});
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this.url_list.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://tmhyyg.nuaa.edu.cn/api/member.index/bodyCheckImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_list.push(result.data)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			
			// 户口本图片
			// 删除图片
			deletePic12(event) {
				this.url_list12.splice(event.index, 1)
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead12(event) {
				console.log(event, 'uuu')
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise12(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise12(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://tmhyyg.nuaa.edu.cn/api/member.index/bodyCheckImg', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_list12.push(result.data)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							console.log(this.url_list12, 'lll;;')
						}
					});
				})
			},
			
			//被监护人选择
			custodian_list(e) {
				console.log(e, 'pp[]')
				this.form.familer_relation = e.value[0].id
				this.familer_relation_id = e.value[0].label
				this.custodian_show = false
			},
			
			imgupload() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: e => {
						upImg({
							filePath: e.tempFilePaths[0],
							name: 'file'
						}).then(res => {
							console.log(res, 'iiii')
							that.form.member_photo = res + '?' + new Date().getTime();
						});
					},
					fail: () => {
						uni.$u.toast('请检测权限');
					}
				});
			},
			hukoumen() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: e => {
						bodyCheckImg({
							filePath: e.tempFilePaths[0],
							name: 'file'
						}).then(res => {
							console.log(res, 'iiii')
							that.form.familer_cert_url = res + '?' + new Date().getTime();
						});
					},
					fail: () => {
						uni.$u.toast('请检测权限');
					}
				});
			},
			upload() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: e => {
						bodyCheckImg({
							filePath: e.tempFilePaths[0],
							name: 'file'
						}).then(res => {
							console.log(res, '体检报告')
							that.form.medical_report = res + '?' + new Date().getTime();
						});
					},
					fail: () => {
						uni.$u.toast('请检测权限');
					}
				});
			},
			// upload() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: e => {
			// 			upImg({
			// 				filePath: e.tempFilePaths[0],
			// 				name: 'file'
			// 			}).then(res => {
			// 				this.form.member_photo = res;
			// 			});
			// 		},
			// 		fail: () => {
			// 			uni.$u.toast('请检测权限');
			// 		}
			// 	});
			// },
			submit() {
				this.form.medical_report = this.url_list
				this.form.familer_cert_url = this.url_list12
				if (!this.form.member_name) {
					uni.$u.toast('请输入姓名');
					return;
				}
				if (!this.form.member_idCard) {
					uni.$u.toast('请输入证件号码');
					return;
				}
				if (!uni.$u.test.idCard(this.form.member_idCard)) {
					uni.$u.toast('请输入正确的身份证号码');
					return;
				}
				if (!this.form.member_phone) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!uni.$u.test.mobile(this.form.member_phone)) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				if (!this.form.emergency_contact_name) {
					uni.$u.toast('请输入紧急联系人');
					return;
				}
				if (!this.form.emergency_contact_phone) {
					uni.$u.toast('请输入请输入紧急联系人电话');
					return;
				}
				if (!this.form.familer_relation) {
					uni.$u.toast('请输入亲属关系');
					return;
				}
				if (!this.form.medical_report) {
					uni.$u.toast('请上传体检报告');
					return;
				}
				if (!this.form.familer_cert_url) {
					uni.$u.toast('请上传户口本照片');
					return;
				}

				audit_save(this.form).then(res => {
					uni.$u.toast('保存成功');
					setTimeout(() => {
						uni.$u.route({
							type: 'back'
						});
					}, 1000);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		background-color: #fff;
	}

	.d-red {
		color: #ff0000;
	}

	.d-label {
		width: 220rpx;
	}

	input {
		text-align: right;
	}
	.catname{
		font-size: 26rpx;
	}
	/deep/ .u-radio-group--row {
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
	}
	.upload {
		// width: 148upx;
		// height: 148upx;
		// border-radius: 8upx;
		// border: 2upx solid #D8D8D8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>